<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery-1.11.0.js"></script>
		<link rel="stylesheet" href="css/reset.css" />
	</head>
	<body>
		<div class="a1">
			<div class="d1">
				<div class="d2">
					<form>
					<h2>Sing In</h2>
					<ul>
						<li>
							<input type="email" />
							<span>email address</span>
						</li>
						<li>
							<input type="password" />
							<span>password</span>
						</li>
					</ul>
					<input type="submit" value="SIGN IN" />
					<h4>Forgot Password?</h4>
				</form>
				<div class="d3">
					<img src="img/github.png" />
					<img src="img/qq.png" />
					<img src="img/sina.png" />
					<img src="img/wechat.png" />
				</div>
				</div>
				<div class="d4">
					<ul>
						<li>
							<h2>New her?</h2>
						</li>
						<li>
							Sign up and duscover great<br />
							amount of new opportunities!
						</li>
					</ul>
					<button class="but1">SIGN IN</button>
				</div>
			</div>
			
			
			
			<div class="b1">
				<div class="b2">
					<form>
					<h2>Sing In</h2>
					<ul>
						<li>
							<input type="text" />
							<span>name</span>
						</li>
						<li>
							<input type="email" />
							<span>email address</span>
						</li>
						<li>
							<input type="password" />
							<span>password</span>
						</li>
						<li>
							<input type="password" />
							<span>comfirm password</span>
						</li>
					</ul>
					<input type="submit" value="SIGN IN" />
					<h4>Forgot Password?</h4>
				</form>
				<div class="b3">
					<img src="img/github.png" />
					<img src="img/qq.png" />
					<img src="img/sina.png" />
					<img src="img/wechat.png" />
				</div>
				</div>
				<div class="b4">
					<ul>
						<li>
							<h2>One of us?</h2>
						</li>
						<li>
							if you already has an account<br />
							just sing in. We've missed you!
						</li>
					</ul>
					<button class="but2">SIGN IN</button>
				</div>
			</div>
		</div>
		<script>
        $(function() {
            $("form ul li input").on({
                focus:function(){
                    $(this).siblings("span").addClass("ziti");
                },
                blur:function() {
                    if($(this).val().length == 0){
                        $(this).siblings("span").removeClass("ziti");
                    }
                }
            });
            $(".but1").on('click',function(){
                $(this).parent().addClass("dong");
                $(this).parent().parent().siblings("div").children(".b4").removeClass("dong");
                $(this).parent().parent().addClass("y");
                $(this).parent().parent().siblings("div").addClass("h");
            });
            $(".but2").on("click",function(){
                $(this).parent().addClass("dong");
                $(this).parent().parent().siblings("div").children(".d4").removeClass("dong");
                $(this).parent().parent().removeClass("h");
                $(this).parent().parent().siblings("div").removeClass("y");
            })
        })
    </script>
	</body>
</html>
